<!-- 客户管理 -->
<template>
    <div class="visits container-content">
        <div class="app-view-box">
            <el-row>
                <el-col :span="24">
                    <h1 class="panel-title">商机登记</h1>
                </el-col>
            </el-row>
            <el-row class="export-container">
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    size="mini"
                    @click="addCustomer"
                    >新增</el-button
                >
                <el-button
                    type="primary"
                    icon="el-icon-download"
                    size="mini"
                    @click="exporting"
                    >导出</el-button
                >
            </el-row>

            <el-table
                ref="customerTable"
                :data="tableData"
                stripe
                style="width: 100%"
                @selection-change="handleSelectionChange"
            >
                <el-table-column
                    type="selection"
                    width="55"
                    align="center"
                ></el-table-column>
                <el-table-column prop="customerName" label="客户名称">
                    <!-- <template slot-scope="scope">
                      <router-link
                        :to="{
                          path: '/CustomerManager/CustomerDetail',
                          query: { id: scope.row.id },
                        }"
                      >
                        <el-link type="primary" href="">{{
                          scope.row.customerName
                        }}</el-link>
                      </router-link>
                    </template> -->
                </el-table-column>
                <el-table-column prop="customerAttributeId" label="客户属性">
                </el-table-column>
                <el-table-column prop="telPhone" label="电话"></el-table-column>
                <el-table-column
                    prop="companyId"
                    label="上级公司"
                ></el-table-column>
                <el-table-column
                    prop="provinceName"
                    label="省份"
                ></el-table-column>
                <el-table-column prop="cityName" label="城市"></el-table-column>
                <el-table-column
                    prop="countyName"
                    label="区县"
                ></el-table-column>
                <el-table-column
                    prop="address"
                    label="详细地址"
                ></el-table-column>
                <el-table-column prop="remarks" label="备注"></el-table-column>
                <el-table-column
                    prop="createTime"
                    label="创建日期"
                ></el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="详情"
                            placement="bottom"
                        >
                            <el-button
                                plain
                                icon="el-icon-more"
                                @click="handleDetail(scope.$index, scope.row)"
                                size="mini"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="编辑"
                            placement="bottom"
                        >
                            <el-button
                                type="primary"
                                plain
                                icon="el-icon-edit"
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="删除"
                            placement="bottom"
                        >
                            <el-button
                                type="danger"
                                plain
                                icon="el-icon-delete"
                                size="mini"
                                @click="handleDelete(scope.$index, scope.row)"
                            ></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            class="table-pagination"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
        <!-- 弹出框 -->
        <el-drawer
            :title="isAdd ? '新增商机' : '编辑商机'"
            :visible.sync="drawer"
            direction="rtl"
            :before-close="handleClose"
            size="100%"
        >
            <div class="drawer-content">
                <AddFormCom v-if="isAdd" ref="addRef" />
                <EditFormCom v-else ref="editRef" :id="rowId" />
            </div>
            <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button type="primary" @click="submit">保存</el-button>
            </div>
        </el-drawer>
        <el-drawer
            title="商机详情"
            :visible.sync="showDetail"
            direction="ttb"
            :before-close="handleClose"
            size="100%"
            show-close
        >
            <DetailFormCom />
        </el-drawer>
    </div>
</template>
<script>
import { getList, deleteCustomer } from "@/api/system/customer";
import AddFormCom from "../add/index";
import EditFormCom from "../edit/index";
import DetailFormCom from "../detail/index";
export default {
    components: {
        AddFormCom,
        EditFormCom,
        DetailFormCom,
    },
    data() {
        return {
            tableData: [],
            searchValue: "",
            total: 0,
            selectRows: [],
            drawer: false, //弹窗显示
            isAdd: false, //是否弹出新增
            rowId: "",
            showDetail: false,
        };
    },
    methods: {
        // 获取客户列表
        getCustomerList() {
            let type = 2;
            getList({ type }).then((res) => {
                this.tableData = res.rows;
                this.total = res.total * 1;
            });
        },

        handleClose(done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        },
        cancelForm() {
            this.drawer = false;
        },
        submit() {
            if (this.isAdd) {
                this.$refs.addRef.formSubmit();
                this.drawer = false;
            } else {
                this.$refs.editRef.formSubmit();
                this.drawer = false;
            }
            this.getCustomerList();
        },

        //新增客户
        addCustomer() {
            // this.$router.push({ path: "/Opportunity/AddOpportunity" });
            this.drawer = true;
            this.isAdd = true;
        },
        //客户详情
        handleDetail(index, row) {
            // this.$router.push({
            //     path: "/Opportunity/DetailOpportunity",
            //     query: { id: row.id },
            // });
            this.showDetail = true;
        },
        // 编辑客户
        handleEdit(index, row) {
            // this.$router.push({
            //     path: "/Opportunity/EditOpportunity",
            //     query: { id: row.id },
            // });
            this.rowId = row.id;
            this.drawer = true;
            this.isAdd = false;
        },

        // 删除客户
        handleDelete(index, row) {
            this.$confirm("请确定要删除所选的记录吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    deleteCustomer(row.id).then((res) => {
                        if (res.code === 200) {
                            this.tableData.splice(index, 1);
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 导出按钮
        exporting() {
            console.log("exporting");
        },
        // 表格checkcbox事件
        handleSelectionChange(rows) {
            this.selectRows = rows;
        },
    },

    created() {
        this.getCustomerList();
    },
};
</script>
<style lang="scss" scoped>
// .visits {
//   padding: 15px;
// }
.pagination {
    margin-top: 10px;
}

.filter-container {
    margin-bottom: 15px;
}

.export-container {
    margin: 15px 0;
}

.panel-title {
    font-size: 18px;
    color: #37474f;
    font-weight: 500;
    text-shadow: rgba(0, 0, 0, 0.15) 0 0 1px;
}

.divider {
    margin: 0;
}
</style>
